<!DOCTYPE html>
<html xmlns:th="https://www.thymeleaf.org/">

<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
    <title>课程管理</title>
    <link rel="stylesheet" type="text/css" href="/css/bootstrap.css"/>
    <link rel="stylesheet" type="text/css" href="/css/back-index.css"/>
    <script src="/js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="/js/bootstrap.js" type="text/javascript" charset="utf-8"></script>
    <script src="/js/bootstrap-paginator.js"></script>
    <script src="/js/bootstrap-mypaginator.js"></script>
    <style>
        .file {
            position: relative;
            display: inline-block;
            background: #D0EEFF;
            border: 1px solid #99D3F5;
            border-radius: 4px;
            padding: 4px 12px;
            overflow: hidden;
            color: #1E88C7;
            text-decoration: none;
            text-indent: 0;
            line-height: 20px;
            width: 100%;
            text-align: center;
        }

        /*.file input {
            position: absolute;
            font-size: 100px;
            right: 0;
            top: 0;
            opacity: 0;
        }*/
        .file:hover {
            background: #AADFFD;
            border-color: #78C3F3;
            color: #004974;
            text-decoration: none;
        }

        .file:focus {
            background: #AADFFD;
            border-color: #78C3F3;
            color: #004974;
            text-decoration: none;
        }

        .img {
            /* max-width: 100px; */
            width: 100px;
            /* max-height: 120px; */
        }

        tr td {
            line-height: 120px !important;
        }

    </style>
    <script type="text/javascript">
        $(function () {
            // 分页
            $("#coursePageHelper").bootstrapPaginator({
                bootstrapMajorVersion: 3,   // bootstrap3之前不需要配置
                currentPage: "[[${coursePage.pageNum == 0 ? 1 : coursePage.pageNum}]]",
                totalPages: "[[${coursePage.pages == 0 ? 1 : coursePage.pages}]]",
                onPageClicked: function (event, originalEvent, type, page) {
                    $("#pageNo").val(page);
                    $("#searchForm").submit();
                }
            })
            // 启用与禁用
            $("input[name='modifyStatus']").click(function () {
                $.ajax({
                    type: "post",
                    url: "/course/modifyStatus",
                    data: {
                        "id": $(this).attr("data-id"),
                        "status": $(this).attr("data-status")
                    },
                    dataType: "json",
                    success: function (result) {
                        if (result.responseCode == "2001") {
                            location.href = "/course/findCourse?pageNo=[[${coursePage.pageNum == 0 ? 1 : coursePage.pageNum}]]";
                        } else {
                            $("#errorMsg").html(result.message);
                        }
                    }
                })
            });
            //添加
            $("#addCourse").click(function () {
                let formData = new FormData($("#addForm")[0])
                if (!$("#course-name").val()) {
                    alert("请输入课程名称");
                    return;
                }
                if (!$("#course-author").val()) {
                    alert("请输入作者");
                    return;
                }
                if ($("#recommendation-grade").val() == "-1") {
                    alert("请选择推荐等级");
                    return;
                }
                $.ajax({
                    type: "post",
                    url: "/course/addCourse",
                    data: formData,
                    dataType: "json",
                    processData: false,
                    contentType: false,
                    success: function (result) {
                        if (result.responseCode == "2001") {
                            location.href = "/course/findCourse?pageNo=[[${coursePage.pageNum == 0 ? 1 : coursePage.pageNum}]]";
                        } else {
                            $("#errorMsg").html(result.message);
                        }
                    }
                })
            });
            // 修改
            $("#modifyCourse").click(function () {
                var id = $("#courseType2-id").val();
                let formData = new FormData($("#modifyForm")[0])
                if (!$("#course-name2").val()) {
                    alert("请输入课程名称");
                    return;
                }
                if (!$("#course-author2").val()) {
                    alert("请输入作者");
                    return;
                }
                if ($("#recommendation-grade2").val() == "-1") {
                    alert("请选择推荐等级");
                    return;
                }
                $.ajax({
                    type: "post",
                    url: "/course/modifyCourse",
                    data: formData,

                    dataType: "json",
                    processData: false,
                    contentType: false,
                    success: function (result) {
                        if (result.responseCode == "2001") {
                            location.href = "/course/findCourse?pageNo=[[${coursePage.pageNum == 0 ? 1 : coursePage.pageNum}]]";
                        } else {
                            $("#errorMsg").html(result.message);
                        }
                    }
                })
            });
            //课程章节显示
            $("#showChapter").on("click", function () {
                var id = $(this).attr("data-id");
                var url = '/chapter/findChapter?id=' + id ;
                $('#frame-id', window.parent.document).attr('src', url);
            });
            // 课程管理 修改课程
            $(".doCourseModify").on("click", function () {
                var row = $(this).closest("tr");
                var id = row.find("td:eq(0)").text();
                var name = row.find("td:eq(1)").text();
                var author = row.find("td:eq(2)").text();
                $("#course-id2").val(id);
                $("#course-name2").val(name);
                $("#course-author2").val(author);
                $("#course-id-input2").show();
                $(".file").html("选择文件");
                $("#cover-image").val(undefined);
                $(".modal-title").html("修改课程");
                $("#Course").modal("show");
            });
            $(".curse-btn").on("click", function () {
                $("#Course").modal("hide");
            });

            // 课程管理 添加课程
            $("#doCourse").on("click", function () {
                $("#course-id-input").hide();
                $(".file").html("选择文件");
                $("#cover-image").val(null);
                // 清空其他输入框
                $("#course-name").val("");
                $("#course-info").val("");
                $("#course-author").val("");
                $("#recommendation-grade").val("-1");
                $(".modal-title").html("添加课程");
                $("#doAddCourse").modal("show");
            });



            // 显示隐藏查询列表
            $('#show-course-search').click(function () {
                $('#show-course-search').hide();
                $('#upp-course-search').show();
                $('.show-course-search').slideDown(500);
            });
            $('#upp-course-search').click(function () {
                $('#show-course-search').show();
                $('#upp-course-search').hide();
                $('.show-course-search').slideUp(500);
            });

            //按钮的超链接设置函数
            //      myoptions.pageUrl = function(type, page, pageNum) {
            //          return "${pageContext.request.contextPath }/findAll.do?pageNo="
            //                  + page;
            //      };
            //分页回调函数,点击按钮事件
            myoptions.onPageClicked = function (event, originalEvent, type, page) {
                //ajax回调接收数据成功时再重新初始化分页按钮
                console.log("pageNo=", page);
            };

            //分页,在bootstrap-mypaginator.js中
            myPaginatorFun("myPages", 1, 5);
        });

        function imageUpload(item) {
            $(item).click();
        }

        function imageChange(item) {
            var file = item.files[0];//获取选中的第一个文件
            $(".file").html(file.name);
            //console.log("file", file.name);
        }
    </script>

</head>

<body>
<div class="panel panel-default" id="coursePic">
    <div class="panel-heading">
        <h3 class="panel-title">课程管理</h3>
    </div>

    <div>
        <input type="button" value="添加课程" class="btn btn-primary" id="doCourse" style="margin: 5px 5px 5px 15px;"/>
        <input type="button" value="查询" class="btn btn-success" id="doSearch"
               onclick="document.getElementById('searchForm').submit()"
               style="margin: 5px 5px 5px 15px;"/>
        <input type="button" class="btn btn-primary" id="show-course-search" value="展开搜索"/>
        <input type="button" value="收起搜索" class="btn btn-primary" id="upp-course-search" style="display: none;"/>
        <button type="button" class="btn btn-link btn-block" style="color:red;">[[${loginMsg}]]</button>
    </div>
    <div class="panel-body">
        <div class="show-course-search" style="display: none;">
            <form class="form-horizontal" id="searchForm" action="/course/findCourse" method="post">
                <input type="hidden" id="pageNo" name="pageNo" th:value="${coursePage.pageNum == 0 ? 1 : coursePage.pageNum}"/>
                <div class="form-group">
                    <div class="form-group col-xs-6">
                        <label for="author-name-search" class="col-xs-3 control-label">作者：</label>
                        <div class="col-xs-8">
                            <input type="text" class="form-control" name="author" id="author-name-search" placeholder="请输入作者"/>
                        </div>
                    </div>
                    <div class="form-group col-xs-6">
                        <label for="course-name-search" class="col-xs-3 control-label">课程名称：</label>
                        <div class="col-xs-8">
                            <input type="text" class="form-control" name="courseName" id="course-name-search"
                                   placeholder="请输入课程名称"/>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <div class="form-group col-xs-6">
                        <label for="course-status-search" class="col-xs-3 control-label">状态：</label>
                        <div class="col-xs-8">
                            <select class="form-control" id="course-status-search" name="status">
                                <option value="">全部</option>
                                <option value="1">启用</option>
                                <option value="0">禁用</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group col-xs-6">
                        <label for="course-type-id-search" class="col-xs-3 control-label">课程类别：</label>
                        <div class="col-xs-8">
                            <select class="form-control" id="course-type-id-search" name="course_type_id">
                                <option value="" selected>全部</option>
                                <option th:each="type:${enabledTypes}" th:value="${type.id}">[[${type.typeName}]]
                                </option>

                            </select>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <div class="form-group col-xs-6">
                        <label class="col-xs-3 control-label">开始日期：</label>
                        <div class="col-xs-8">
                            <input type="text" class="form-control" name="startDate" placeholder="请输入开始时间:2017-10-10"/>
                        </div>
                    </div>
                    <div class="form-group col-xs-6">
                        <label class="col-xs-3 control-label">结束日期：</label>
                        <div class="col-xs-8">
                            <input type="text" class="form-control" name="endDate" placeholder="请输入结束时间:2017-10-12"/>
                        </div>
                    </div>
                </div>

            </form>
        </div>

        <div class="modal fade" tabindex="-1" id="doAddCourse">
            <!-- 窗口声明 -->
            <div class="modal-dialog modal-lg">
                <!-- 内容声明 -->
                <div class="modal-content">
                    <!-- 头部、主体、脚注 -->
                    <div class="modal-header">
                        <button class="close" data-dismiss="modal">&times;</button>
                        <h4 class="modal-title">添加课程</h4>
                    </div>
                    <form id="addForm">
                        <div class="modal-body text-center">
                            <div class="row text-right" id="course-id-input" style="display: none;">
                                <label for="course-id" class="col-xs-4 control-label">课程编号：</label>
                                <div class="col-xs-4">
                                    <input type="text" class="form-control" id="course-id" name="course_id"
                                           readonly="true"/>
                                </div>
                            </div>
                            <br>
                            <div class="row text-right">
                                <label for="course-name" class="col-xs-4 control-label">课程名称：</label>
                                <div class="col-xs-4">
                                    <input type="text" class="form-control" id="course-name" name="courseName"/>
                                </div>
                            </div>
                            <br>
                            <div class="row text-right">
                                <label for="course-info" class="col-xs-4 control-label">课程简介：</label>
                                <div class="col-xs-4">
                                    <input type="text" class="form-control" id="course-info" name="courseInfo"/>
                                </div>
                            </div>
                            <br>
                            <div class="row text-right">
                                <label for="course-author" class="col-xs-4 control-label">作者：</label>
                                <div class="col-xs-4">
                                    <input type="text" class="form-control" id="course-author" name="author"/>
                                </div>

                            </div>
                            <br>
                            <div class="row text-right">
                                <label class="col-xs-4 control-label">封面图片：</label>
                                <div class="col-xs-4">
                                    <a href="javascript:imageUpload('#cover-image');" class="file">选择文件</a>
                                    <input type="file" name="file" style="display: none;"
                                           onchange="imageChange(this)" id="cover-image"/>
                                </div>
                            </div>
                            <br>
                            <div class="row text-right">
                                <label for="recommendation-grade" class="col-xs-4 control-label">推荐等级：</label>
                                <div class="col-xs-4">
                                    <select class="form-control" id="recommendation-grade" name="recommendationGrade">
                                        <option value="-1" selected>请选择</option>
                                        <option value="0">普通</option>
                                        <option value="1">推荐</option>
                                    </select>
                                </div>
                            </div>
                            <br>
                            <div class="row text-right">
                                <label for="course-type-id" class="col-xs-4 control-label">课程类别：</label>
                                <div class="col-xs-4">
                                    <select class="form-control" id="course-type-id" name="courseTypeId">
                                        <option th:each="type:${enabledTypes}" th:value="${type.id}">
                                            [[${type.typeName}]]
                                        </option>
                                    </select>
                                </div>
                            </div>
                            <br>
                        </div>
                    </form>
                    <div class="modal-footer">
                        <button class="btn btn-primary curse-btn" id="addCourse">确定</button>
                        <button class="btn btn-primary cancel" data-dismiss="modal">取消</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="modal fade" tabindex="-1" id="Course">
            <!-- 窗口声明 -->
            <div class="modal-dialog modal-lg">
                <!-- 内容声明 -->
                <div class="modal-content">
                    <!-- 头部、主体、脚注 -->
                    <div class="modal-header">
                        <button class="close" data-dismiss="modal">&times;</button>
                        <h4 class="modal-title">修改课程</h4>
                    </div>
                    <form id="modifyForm">
                        <input type="hidden" name="courseId" id="course-id2" th:value="${course.id}"/>
                        <div class="modal-body text-center">


                            <br>
                            <div class="row text-right">
                                <label for="course-name" class="col-xs-4 control-label">课程名称：</label>
                                <div class="col-xs-4">
                                    <input type="text" class="form-control" id="course-name2" name="courseName"/>
                                </div>
                            </div>
                            <br>
                            <div class="row text-right">
                                <label for="course-info" class="col-xs-4 control-label">课程简介：</label>
                                <div class="col-xs-4">
                                    <input type="text" class="form-control" id="course-info2" name="courseInfo"/>
                                </div>
                            </div>
                            <br>
                            <div class="row text-right">
                                <label for="course-author" class="col-xs-4 control-label">作者：</label>
                                <div class="col-xs-4">
                                    <input type="text" class="form-control" id="course-author2" name="author"/>
                                </div>

                            </div>
                            <br>
                            <div class="row text-right">
                                <label class="col-xs-4 control-label">封面图片：</label>
                                <div class="col-xs-4">
                                    <a href="javascript:imageUpload('#cover-image');" class="file">选择文件</a>
                                    <input type="file" name="file" style="display: none;"
                                           onchange="imageChange(this)" id="cover-image2"/>
                                </div>
                            </div>
                            <br>
                            <div class="row text-right">
                                <label for="recommendation-grade" class="col-xs-4 control-label">推荐等级：</label>
                                <div class="col-xs-4">
                                    <select class="form-control" id="recommendation-grade2" name="recommendationGrade">
                                        <option value="-1" selected>请选择</option>
                                        <option value="0">普通</option>
                                        <option value="1">推荐</option>
                                    </select>
                                </div>
                            </div>
                            <br>
                            <div class="row text-right">
                                <label for="course-type-id" class="col-xs-4 control-label">课程类别：</label>
                                <div class="col-xs-4">
                                    <select class="form-control" id="course-type-id2" name="courseTypeId">
                                        <option th:each="type:${enabledTypes}" th:value="${type.id}">
                                            [[${type.typeName}]]
                                        </option>
                                    </select>
                                </div>
                            </div>
                            <br>
                        </div>
                    </form>
                    <div class="modal-footer">
                        <button class="btn btn-primary curse-btn" id="modifyCourse">确定</button>
                        <button class="btn btn-primary cancel" data-dismiss="modal">取消</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="show-list">
            <table class="table table-bordered table-hover" style="text-align: center;">
                <thead>
                <tr class="text-danger">
                    <th class="text-center">编号</th>
                    <th class="text-center">课程名称</th>
                    <th class="text-center">作者</th>
                    <th class="text-center">封面图片</th>
                    <th class="text-center">点击量</th>
                    <th class="text-center">推荐等级</th>
                    <th class="text-center">课程类别</th>
                    <th class="text-center">创建时间</th>
                    <th class="text-center">状态</th>
                    <th class="text-center">操作</th>
                </tr>
                </thead>
                <tbody id="tb">
                <tr th:each="course:${coursePage.list} ">
                    <td>[[${course.id}]]</td>
                    <td>[[${course.courseName}]]</td>
                    <td>[[${course.author}]]</td>
                    <td>
                        <image class="img" src="[[${course.coverImageUrl}]]" alter="no image"/>
                    </td>
                    <td>[[${course.clickNumber}]]</td>
                    <td>
                        <span th:if="${course.recommendationGrade == 1}">推荐</span>
                        <span th:if="${course.recommendationGrade == 0}">普通</span>
                    </td>
                    <td>[[${course.courseTypeName}]]</td>
                    <td>[[${course.createDate}]]</td>
                    <td>
                        <span th:if="${course.status == 1}">启用</span>
                        <span th:if="${course.status == 0}">禁用</span>
                    </td>
                    <td class="text-center">
                        <input type="button" class="btn btn-warning btn-sm doCourseModify" value="修改"/>
                        <span th:if="${course.status == 1}">
                            <input type="button" class="btn btn-danger btn-sm" name="modifyStatus"
                                   th:data-id="${course.id}" th:data-status="${course.status}" value="禁用"/>
                        </span>
                        <span th:if="${course.status == 0}">
                            <input type="button" class="btn btn-danger btn-sm" name="modifyStatus"
                                   th:data-id="${course.id}" th:data-status="${course.status}" value="启用"/>
                        </span>
                        <input type="button" class="btn btn-success btn-sm course-detail" id="showChapter" th:data-id="${course.id}" value="章节详情"/>
                    </td>
                </tr>
                </tbody>
            </table>
        </div>
        <!-- 分页 -->
        <div style="text-align: center;">
            <ul id="coursePageHelper"></ul>
        </div>

    </div>
</div>
</body>

</html>